<template>
  <div style="margin-left: 10px">
    <div style="width: 100%; padding: 10px 0">
      <el-button type="primary" size="small" :disabled="multipleSelection.length === 0">选择删除</el-button>
      <el-button type="primary" size="small">添加商品</el-button>
      <el-button type="primary" size="small">批量导入商品</el-button>
    </div>
    <el-alert
      :title="`选择数${count}`"
      type="warning"
      show-icon
      :closable="false">
    </el-alert>
    <el-table
      :data="list"
      border
      style="width: 100%; margin-top: 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        prop="id"
        label="商品ID"
        align="center"
      />
      <el-table-column
        prop="name"
        label="商品名字"
        align="center"
      />
      <el-table-column
        prop="activityName"
        label="所属活动"
        align="center"
      />
      <el-table-column
        prop="brandName"
        label="所属品牌"
        align="center"
      />
      <el-table-column
        prop="status"
        label="活动状态"
        align="center"
      />
    </el-table>
    <el-pagination
      style="float: right;margin: 15px 0;"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="pagination.pageSizes"
      :current-page="pagination.pageNum"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

</template>

<script>
import { queryList } from './venueApi';

export default {
  name: 'Demo',
  data() {
    return {
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100]
      },
      // 列表数据
      list: [
        {
          id: 1,
          name: 'name1',
          activityName: 'activityName1',
          brandName: 'brandName1',
          status: 'status1'
        },
        {
          id: 2,
          name: 'name2',
          activityName: 'activityName2',
          brandName: 'brandName2',
          status: 'status2'
        },
        {
          id: 3,
          name: 'name3',
          activityName: 'activityName3',
          brandName: 'brandName3',
          status: 'status3'
        }
      ],
      multipleSelection: []
    }
  },
  computed: {
    count() {
      return this.multipleSelection.length
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.fetchList()
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.fetchList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    fetchList() {
      const { pageNum, pageSize } = this.pagination
      const params = { pageNum, pageSize }
      queryList(params).then(res => {
        const { data } = res || {}
        const { list, total } = data
        this.list = list || []
        this.pagination.total = total
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

<style scoped>

</style>
